@import '../bootstrap'

.container
  display: flex
  margin-right: auto
  margin-left: auto
  flex: 1 1 100%
  padding: $grid-gutters.lg
  width: 100%

  for size, width in $container-max-widths
    @media only screen and (min-width: width)
      max-height: width

  @media $display-breakpoints.xs-only
    padding: $grid-gutters.xl

  &.fluid
    max-width: 100%
    width: 100%

  &.fill-height
    display: flex

    .layout
      width: 100%
      flex: 1 1 auto

  &.grid-list
    for $size, $gutter in $grid-gutters
      &-{$size}
        padding: $gutter

        .layout
          .flex
            padding: ($gutter / 2)

        > .layout,
        .flex > .layout
          margin: -($gutter / 2)

.layout
  display: flex
  flex: 1 1 auto
  flex-wrap: nowrap
  height: 100%
  width: 100px

  &.row
    flex-direction: row

    &.reverse
      flex-direction: row-reverse

  &.column
    flex-direction: column

    &.reverse
      flex-direction: column-reverse

  &.wrap
    flex-wrap: wrap

for size, height in $grid-breakpoints
  @media all and (min-height: height)
    for n in (1..$grid-columns)
      .flex.{size}{n}
        flex-basis: (n / $grid-columns * 100)%
        max-height: (n / $grid-columns * 100)%

      .flex.order-{size}{n}
        order: n

    for n in (0..$grid-columns)
      .flex.offset-{size}{n}
        margin-left: (n / $grid-columns * 100)%

.flex
  flex: 1 1 auto

.align
  &-start
    align-items: flex-start

  &-end
    align-items: flex-end

  &-center
    align-items: center

  &-baseline
    align-items: baseline

.align-content
  &-start
    align-content: flex-start

  &-end
    align-content: flex-end

  &-center
    align-content: center

  &-space-between
    align-content: space-between

  &-space-around
    align-content: space-around

.justify
  &-start
    justify-content: flex-start

  &-end
    justify-content: flex-end

  &-center
    justify-content: center

  &-space-around
    justify-content: space-around

  &-space-between
    justify-content: space-between

.spacer
  flex-grow: 1 !important

.scroll-y
  overflow-y: auto

.fill-height
  height: 100%

.hide-overflow
  overflow: hidden !important

.show-overflow
  overflow: visible !important

.no-wrap
  white-space: nowrap

.ellipsis
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

// Display helpers
.d-flex
  display: flex

.d-inline-flex
  display: inline-flex

.d-flex,
.d-inline-flex
  > *
    flex: 1 1 auto

.d-block
  display: block

.d-inline-block
  display: inline-block
